<template>
    <div id="app">
        <div class="app-tab display_flex_center">
            <div class="cursor-pointer wdjx" :class="tabIndex==0?'wdjxSelect':''" @click="tabSelect(0)">
                <span>文档解析</span>
            </div>
            <div class="cursor-pointer tpgl" :class="tabIndex==1?'tpglSelect':''" @click="tabSelect(1)">
                <span>图片管理</span>
            </div>
            <div class="cursor-pointer wdsc" :class="tabIndex==2?'wdscSelect':''" @click="tabSelect(2)">
                <span>文档生成</span>
            </div>
        </div>
        <div class="routerView">
            <router-view></router-view>
        </div>

        <div class="tooltip-peizhi" v-dragDialogHead>
            <span @click.stop="showMuLu" style="cursor:pointer;">
                系统参数
            </span>
        </div>
        <el-dialog title="系统参数" :visible.sync="fileUploadVisible">
            <div class="project-storage">
                <el-form ref="form" :model="form" label-width="120px" style="width: 50%">
                    <el-form-item v-if="tabIndex==0?true:false" label="解析文件数">
                        <el-input-number v-model="form.analysisNum" :min="1" :max="30" label="解析文件数"></el-input-number>
                    </el-form-item>
                    <el-form-item v-if="tabIndex==1?true:false" label="图片存储目录">
                        <el-input style="width: 360px;" v-model="form.saveCatalog" class="input-with-select">
                            <el-button slot="append" icon="el-icon-folder" type="success" @click="btnClick('store')"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="tabIndex==1?true:false" label="图片上传数">
                        <el-input-number v-model="form.uploadNum" :min="1" :max="100" label="图片上传数"></el-input-number>
                    </el-form-item>
                    <el-form-item v-if="tabIndex==2?true:false" label="word存储目录">
                        <el-input style="width: 360px;" v-model="form.saveCatalogWord" class="input-with-select">
                            <el-button slot="append" icon="el-icon-folder" type="success" @click="btnClick1('store')"></el-button>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="fileUploadVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="primaryImg">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {ipcRenderer} from 'electron'
    import { HomeLeftMenu } from "@/router/modules/Home.js";
    export default {
        name: 'app',
        data() {
            return {
                tabIndex: 0,

                //图片保存路径
                form:{
                    saveCatalog: this.$store.getters.getSaveCatalog,
                    analysisNum: this.$store.getters.getAnalysisNum,
                    uploadNum: this.$store.getters.getUploadNum,
                    saveCatalogWord: this.$store.getters.getSaveCatalogWord
                },
                fileUploadVisible: false
            }
        },
        mounted(){
            window.onresize=function (e) {
                var bigBox = document.getElementById("app");
                var bigBoxW = bigBox.offsetWidth;    // 返回元素的总宽度
                var bigBoxH = bigBox.offsetHeight;    // 返回元素的总高度

                var tooltipBox = document.getElementsByClassName("tooltip-peizhi")[0];
                tooltipBox.style.left = (bigBoxW-30-70) + 'px';
                tooltipBox.style.top = (bigBoxH-40-70) + 'px';
            }
        },
        methods: {
            //文件加选择操作流程
            //展示选择目录
            showMuLu(){
                let self = this;
                self.fileUploadVisible = true;

                self.$nextTick(()=>{
                    self.form={
                        saveCatalog: self.$store.getters.getSaveCatalog,
                        analysisNum: self.$store.getters.getAnalysisNum,
                        uploadNum: self.$store.getters.getUploadNum,
                        saveCatalogWord: this.$store.getters.getSaveCatalogWord
                    };
                })
            },
            //打开文件加向主进程发送事件
            btnClick(type){
                let self = this;
                // 选择存贮路径
                ipcRenderer.send('open-directory-dialog','openDirectory');
                ipcRenderer.on('selectedItem',function(event,fileUrl){
                    self.form.saveCatalog = fileUrl;
                });
            },
            btnClick1(type){
                let self = this;
                // 选择存贮路径
                ipcRenderer.send('open-directory-dialog','openDirectory');
                ipcRenderer.on('selectedItem',function(event,fileUrl){
                    self.form.saveCatalogWord = fileUrl;
                });
            },
            //确定选择目录
            primaryImg(){
                let self = this;
                if(self.form.saveCatalog==""){
                    self.$message({
                        message:"请选择图片要存储的目录",
                        type: "warning"
                    });
                    return;
                }
                if(self.form.saveCatalogWord==""){
                    self.$message({
                        message:"请选择word文档要存储的目录",
                        type: "warning"
                    });
                    return;
                }
                self.$store.dispatch('setSaveCatalog', self.form.saveCatalog);
                self.$store.dispatch('setAnalysisNum', self.form.analysisNum);
                self.$store.dispatch('setUploadNum', self.form.uploadNum);
                self.$store.dispatch('setSaveCatalogWord', self.form.saveCatalogWord);

                self.fileUploadVisible = false;
            },

            tabSelect(index) {
                let self = this;
                if (self.tabIndex == index) {
                    return;
                }
                self.tabIndex = index;
                self.$router.push({
                    path: HomeLeftMenu[index].path
                })
            }
        }
    }
</script>

<style src="./public/css/common.css">

</style>
